<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Responsive Admin Dashboard Template">
    <meta name="keywords" content="admin,dashboard">
    <meta name="author" content="stacks">

    <!-- Title -->
    <title>{% block title %}{% endblock %}</title>
    <!-- Styles -->
    <link href="{% static 'css/css.css' %}" rel="stylesheet">
    <link href="{% static 'css/icon.css' %}" rel="stylesheet">
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/all.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/perfect-scrollbar.css' %}" rel="stylesheet">
    <link href="{% static 'css/pace.css' %}" rel="stylesheet">
    <!-- Theme Styles -->
    <link href="{% static 'css/main.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/custom.css' %}" rel="stylesheet">
<style>
    .page-header {
      position: fixed;  /* 设置为固定定位 */
      width: 100%;      /* 宽度为100% */
      z-index: 1000;    /* 确保它在其他元素之上 */
      background-color: #181821;  /* 设置背景颜色 */
      padding: 10px 0;  /* 上下内边距 */
      text-align: center;  /* 文字居中 */
    }
  </style>
    {% block head %}{% endblock %}

</head>
<body class="page-sidebar-collapsed">

<div class="page-container">
    <div class="page-sidebar">
        <a class="logo" href="#">HaiTai</a>
        <ul class="list-unstyled accordion-menu">
            <li>
                <a href="#"><i data-feather="activity"></i>Dashboard<i
                        class="fas fa-chevron-right dropdown-icon"></i></a>
                <ul class="">
                    <li><a href="#"><i class="far fa-circle"></i>eCommerce</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Crypto</a></li>
                </ul>
            </li>
            <li>
                <a href="#"><i data-feather="aperture"></i>Apps<i class="fas fa-chevron-right dropdown-icon"></i></a>
                <ul class="">
                    <li><a href="#"><i class="far fa-circle"></i>Email</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Contact</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Calendar</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Social</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>File Manager</a></li>
                </ul>
            </li>
            <li>
                <a href="#"><i data-feather="code"></i>Components<i class="fas fa-chevron-right dropdown-icon"></i></a>
                <ul class="">
                    <li><a href="#"><i class="far fa-circle"></i>Alerts</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Typography</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Icons</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Badge</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Buttons</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Cards</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Dropdowns</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>List Group</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Toasts</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Modal</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Pagination</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Popovers</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Progress</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Spinners</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Accordion</a></li>
                </ul>
            </li>
            <li>
                <a href="#"><i data-feather="box"></i>Plugins<i class="fas fa-chevron-right dropdown-icon"></i></a>
                <ul class="">
                    <li><a href="#"><i class="far fa-circle"></i>Block UI</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Session Timeout</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Tree View</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Select2</a></li>
                </ul>
            </li>
            <li class="active-page">
                <a href="#" class="active"><i data-feather="star"></i>Pages<i
                        class="fas fa-chevron-right dropdown-icon"></i></a>
                <ul class="">
                    <li><a href="#"><i class="far fa-circle"></i>Invoice</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>404 Page</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>500 Page</a></li>
                    <li><a href="#" class="active"><i class="far fa-circle"></i>Blank Page</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Login</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Register</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Lockscreen</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Price</a></li>
                </ul>
            </li>
            <li>
                <a href="#"><i data-feather="droplet"></i>Form<i class="fas fa-chevron-right dropdown-icon"></i></a>
                <ul class="">
                    <li><a href="#"><i class="far fa-circle"></i>Form Elements</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Form Layout</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Form Validation</a></li>
                </ul>
            </li>
            <li>
                <a href="#"><i data-feather="grid"></i>Tables<i class="fas fa-chevron-right dropdown-icon"></i></a>
                <ul class="">
                    <li><a href="#"><i class="far fa-circle"></i>Basic Tables</a></li>
                    <li><a href="#"><i class="far fa-circle"></i>Data Tables</a></li>
                </ul>
            </li>
            <li>
                <a href="#"><i data-feather="pie-chart"></i>Charts</a>
            </li>

        </ul>
        <a href="#" id="sidebar-collapsed-toggle"><i data-feather="arrow-right"></i></a>
    </div>
    <div class="page-content">
        <div class="page-header">
            <nav class="navbar navbar-expand-lg d-flex justify-content-between">
                <div class="header-title flex-fill">
                    <a href="#" id="sidebar-toggle"><i data-feather="arrow-left"></i></a>
                    <h5>{% block pageName %}{% endblock %}</h5>
                </div>
                <div class="header-search">
                    <form>
                        <input class="form-control" type="text" placeholder="搜 索" aria-label="Search">
                        <a href="#" class="close-search"><i data-feather="x"></i></a>
                    </form>
                </div>
                <div class="flex-fill" id="headerNav">
                    <ul class="navbar-nav">
                        <li class="nav-item d-md-block d-lg-none">
                            <a class="nav-link" href="#" id="toggle-search"><i data-feather="search"></i></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link activity-trigger" href="#" id="activity-sidebar-toggle"><i
                                    data-feather="grid"></i></a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link notifications-dropdown" href="#" id="notificationsDropDown" role="button"
                               data-bs-toggle="dropdown" aria-expanded="false">3
                                <div class="spinner-grow text-danger" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end notif-drop-menu"
                                 aria-labelledby="notificationsDropDown">
                                <h6 class="dropdown-header">Notifications</h6>
                                <a href="#">
                                    <div class="header-notif">
                                        <div class="notif-image">
                                  <span class="notification-badge bg-info text-white">
                                    <i class="fas fa-bullhorn"></i>
                                  </span>
                                        </div>
                                        <div class="notif-text">
                                            <p class="bold-notif-text">faucibus dolor in commodo lectus mattis</p>
                                            <small>19:00</small>
                                        </div>
                                    </div>
                                </a>
                                <a href="#">
                                    <div class="header-notif">
                                        <div class="notif-image">
                                  <span class="notification-badge bg-primary text-white">
                                    <i class="fas fa-bolt"></i>
                                  </span>
                                        </div>
                                        <div class="notif-text">
                                            <p class="bold-notif-text">faucibus dolor in commodo lectus mattis</p>
                                            <small>18:00</small>
                                        </div>
                                    </div>
                                </a>
                                <a href="#">
                                    <div class="header-notif">
                                        <div class="notif-image">
                                  <span class="notification-badge bg-success text-white">
                                    <i class="fas fa-at"></i>
                                  </span>
                                        </div>
                                        <div class="notif-text">
                                            <p>faucibus dolor in commodo lectus mattis</p>
                                            <small>yesterday</small>
                                        </div>
                                    </div>
                                </a>
                                <a href="#">
                                    <div class="header-notif">
                                        <div class="notif-image">
                                  <span class="notification-badge">
                                    <img src="{% static 'picture/avatar2.jpeg' %}" alt="">
                                  </span>
                                        </div>
                                        <div class="notif-text">
                                            <p>faucibus dolor in commodo lectus mattis</p>
                                            <small>yesterday</small>
                                        </div>
                                    </div>
                                </a>
                                <a href="#">
                                    <div class="header-notif">
                                        <div class="notif-image">
                                  <span class="notification-badge">
                                    <img src="{% static 'picture/avatar5.jpeg' %}" alt="">
                                  </span>
                                        </div>
                                        <div class="notif-text">
                                            <p>faucibus dolor in commodo lectus mattis</p>
                                            <small>yesterday</small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link profile-dropdown" href="#" id="profileDropDown" role="button"
                               data-bs-toggle="dropdown" aria-expanded="false"><img
                                    src="{% static 'picture/avatar1.jpeg' %}" alt=""></a>
                            <div class="dropdown-menu dropdown-menu-end profile-drop-menu"
                                 aria-labelledby="profileDropDown">
                                <a class="dropdown-item" href="#"><i data-feather="user"></i>Profile</a>
                                <a class="dropdown-item" href="#"><i data-feather="inbox"></i>Messages</a>
                                <a class="dropdown-item" href="#"><i data-feather="edit"></i>Activities<span
                                        class="badge rounded-pill bg-success">12</span></a>
                                <a class="dropdown-item" href="#"><i data-feather="check-circle"></i>Tasks</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#"><i data-feather="settings"></i>Settings</a>
                                <a class="dropdown-item" href="#"><i data-feather="unlock"></i>Lock</a>
                                <a class="dropdown-item" href="#"><i data-feather="log-out"></i>Logout</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="main-wrapper">
            {% block main %}{% endblock %}
        </div>
        <div class="page-footer">
            {% block footer %}{% endblock %}
        </div>

    </div>

</div>

<div class="activity-sidebar-overlay"></div>
<div class="activity-sidebar">
    <a href="#" id="activity-sidebar-close"><i class="material-icons">close</i></a>
    <div class="activity-header">
        <h5>Activity Logs</h5>
    </div>
    <div class="activity-body">
        <ul class="activity-list list-unstyled">
            <li class="activity-item">
                <div class="activity-icon"><i class="material-icons">add</i></div>
                <div class="activity-text">Ann Green uploaded new item
                    <span>This item has to be reviewed, moderators will check it soon.</span>
                </div>
                <div class="activity-helper">45min ago</div>
            </li>
            <li class="activity-item activity-info">
                <div class="activity-icon"><i class="material-icons">code</i></div>
                <div class="activity-text">John Doe made changes to create-invoice.js
                    <span>57 lines of code added, 0 removals, 0 errors, 6 warnings</span>
                </div>
                <div class="activity-helper">3h ago</div>
            </li>
            <li class="activity-item activity-danger">
                <div class="activity-icon"><i class="material-icons">error_outline</i></div>
                <div class="activity-text">Can't retrieve data from server
                    <span>Server is not responding, please contact provider</span>
                </div>
                <div class="activity-helper">6h ago</div>
            </li>
            <li class="activity-item">
                <div class="activity-icon"><i class="material-icons">done</i></div>
                <div class="activity-text">Files Uploaded
                    <span>2 new files uploaded</span>
                    <div class="mail-attachment-files">
                        <div class="card">
                            <img src="{% static 'picture/card2.jpeg' %}" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">image.jpg</h5>
                                <p class="card-text text-secondary">305 KB</p>
                            </div>
                        </div>
                        <div class="card">
                            <img src="{% static 'picture/card1.jpeg' %}" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">image2.jpg</h5>
                                <p class="card-text text-secondary">400 KB</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="activity-helper">8h ago</div>
            </li>
        </ul>
    </div>
</div>

<div class="search-results">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="search-results-header">
                    <h5>搜索结果</h5>
                    <a href="#" id="closeSearch"><i class="material-icons">关闭</i></a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <ul class="search-result-list user-search">
                    <li>
                        <img src="{% static 'picture/avatar2.jpeg' %}" alt="">
                        <p>John Doe<br>(Works at <span class="search-input-value">hj</span>)</p>
                    </li>
                    <li>
                        <img src="{% static 'picture/avatar3.jpeg' %}" alt="">
                        <p>Anna doe<br>(Lives in <span class="search-input-value">hj</span>)</p>
                    </li>
                    <li>
                        <img src="{% static 'picture/avatar4.jpeg' %}" alt="">
                        <p>People near:<br><span class="search-input-value">hj</span></p>
                    </li>
                </ul>
            </div>
            <div class="col-md-4">
                <ul class="search-result-list social-search">
                    <li>
                        <div class="social-search-icon facebook-icon-bg">
                            <i class="fab fa-facebook-f"></i>
                        </div>
                        <div class="social-search-text">
                            <p><span class="search-input-value">hj</span> on Facebook</p>
                        </div>
                    </li>
                    <li>
                        <div class="social-search-icon twitter-icon-bg">
                            <i class="fab fa-twitter"></i>
                        </div>
                        <div class="social-search-text">
                            <p><span class="search-input-value">hj</span> on Twitter</p>
                        </div>
                    </li>
                    <li>
                        <div class="social-search-icon google-icon-bg">
                            <i class="fab fa-google"></i>
                        </div>
                        <div class="social-search-text">
                            <p><span class="search-input-value">hj</span> on Google</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="col-md-4">
                <ul class="search-result-list article-search">
                    <li>
                        <p>Lorem ipsum dolor sit amet, consectetur <span class="search-input-value">hj</span> adipiscing
                            elit, sunt in culpa quifdaasd quis.</p>
                        <span class="search-article-date">06 Jul, 2021</span>
                    </li>
                    <li>
                        <p>Duis non semper sapien. Morbi imperdiet velit in <span class="search-input-value">hj</span>
                            bibendum lobortis. Integer arcu urna, elementum in pellentesque nec, finibus at nisi.</p>
                        <span class="search-article-date">19 Mar, 2017</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Javascripts -->
<script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'js/core@2.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/feather-icons.js' %}"></script>
<script src="{% static 'js/perfect-scrollbar.min.js' %}"></script>
<script src="{% static 'js/pace.min.js' %}"></script>
<script src="{% static 'js/main.min.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>